<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻选项卡的研究</title>
<script type="text/javascript" src="../../js/jquery-1.2.6.js"></script>
<style>
/* CSS Document */
body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, strong, i, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, table, caption, tr, th, td, input { 
	margin:0; padding:0; list-style:none; 
	}
table { border-collapse:collapse; border-spacing:0 }
body { font:12px Tahoma, Arial,'宋体',sans-serif; background:#fff }
h1, h2, h3, h4, h5, h6 { font-size:100% }
a:link,a:visited { text-decoration:none;}
a:hover,a:active{ color:#ff8300; text-decoration:none;}
a:focus, button:focus { outline:none }
button { padding:0; cursor:pointer; border:0 }
img { border:0 }
.fl { float:left }
.fr { float:right }
.clr{ clear:both}
.s{ display:inline-block; font-size:0 }
	ul{list-style: none outside none;margin:0px;}
	li{list-style-type: none;}
	body{text-decoration: none;font:12px "宋体",sans-serif;}
	.wrapper{width:1000px;height:1000px;margin:0 auto;}
	.fill{background-color: #ccc;}
	.border{border:1px solid #0000ff;}
	.news_widget{
		clear: both;
		width:401px;
	}
	.news_widget h2{
		font-weight: normal;
		margin:0;
		padding:0;
	}
	
	.dotline{
		 border-bottom: 1px dotted #DCDDDD;
	}
	
	/*选项卡标题栏*/
	.news_hd{
		height:26px;
		line-height:25px;
		border-left:1px solid #b1c8d7;
		border-right:1px solid #b1c8d7;
		border-top:1px solid #b1c8d7;
		color:#1e50a2;
		display: block;
	}
	.news_hd .tab-u{
		width:90px;
		height:25px;
		display:inline-block;
		border-right:1px solid #b1c8d7;
		border-bottom:1px solid #b1c8d7;
		text-align: center;
		float: left;
		cursor: pointer;
		background-color: #e6eef5;
	}
	.news_hd .current{
		border-bottom:none;
		font-weight: bold;
		background-color: #fff;
	}
	.news_hd .tab-last{
		border-right: none;
	}
	.news_hd .tab-u a{
		line-height: 25px;
		color:#1e50a2;
		font-size:14px;
	}
	.news_hd .tab-u a:hover{
		color:#ba2636;
		text-decoration: underline;
	}
	
	/*新闻内容*/
	.news_bd{
		height:300px;
		border:1px solid #b1c8d7;
		border-top:medium none;
		padding:12px 8px 0px 10px;
	}
	
	.news_bd a{
		font-size:14px;
		line-height: 25px;
		color: #2b2b2b;
	}
	
	.news_bd .content-list{
		padding-bottom: 4px;
		margin-bottom: 4px;
	}
	
</style>
<script type="text/javascript">
$(function(){
	
	$(".news_hd span").each(function(){
		var that = $(this);
		that.hover(function(){
			$(".news_hd span[class*=current]").removeClass("current");
			that.addClass("current");
		},function(){
			
		});
	});
});
</script>
</head>

<body>
<div class="wrapper">
	<span style="width:401px;background-color: #ccc;display: inline-block;">
	网易新闻
	</span>
	<h2>新闻选项卡的研究</h2></br>
	<div class="news_widget">
		<h2 class="news_hd">
			<span class="tab-u current"><a>国内新闻</a></span>
			<span class="tab-u"><a>安徽新闻</a></span>
			<span class="tab-u "><a>体育</a></span>
			<span class="tab-u tab-last"><a>十八大</a></span>
		</h2>
		<div class="news_bd">
			<ul class="content-list dotline">
				<li><a href="javascript:void(0)">任建宇忆劳教经历:每晚唱红歌慢慢失去思想 但可减刑</a></li>
				<li><a href="javascript:void(0)">贵州5名儿童闷死前11天家长已报案 生前合影曝光(图)</a></li>
				<li><a href="javascript:void(0)">传歼15在辽宁舰成功着舰 政协常委:香港人心未完全回归</a></li>
				<li><a href="javascript:void(0)">女生与老师吃饭坠亡调查：醉酒如厕坠楼 陪喝48瓶啤酒</a></li>
				<li><a href="javascript:void(0)">俏江南董事长张兰加入外籍 中国七成富豪已经或准备移民</a></li>
			</ul>
			<ul>
				<li><a href="javascript:void(0)">母亲来京看望读研儿子 遭兰州警方遣返并劳教一年</a></li>
				<li><a href="javascript:void(0)">网曝重庆北碚区委书记不雅照 纪委称正在核实</a></li>
				<li><a href="javascript:void(0)">浙江虐童女老师外出打工 不愿道歉 金正恩妹妹露面(图)</a></li>
				<li><a href="javascript:void(0)">佛山南海拟660万购win8系统 单价比官网贵1倍多</a></li>
				<li><a href="javascript:void(0)">以色列承认炸死3名巴记者 哈马斯处决以间谍并拖尸游街</a></li>
			</ul>
		</div>
	</div>
</div>

</body>
</html>
